<script setup lang="ts">
import CompWrapper from '@/layouts/CompWrapper/index.vue'
import EventBus from '@/libs/EventBus'
import { onMounted, onUnmounted, ref } from 'vue'
import ImageCover from '@/components/ImageCover/index.vue'
import { oriDataBackPressureLabel } from '@/mock/backPressure'
import Charts from '@/components/charts/index.vue'
import { getProcData, getVibData } from '@/api'

const informationList = ref<ImageCoverType[]>([...oriDataBackPressureLabel])

const runSpeed = ref(0)

let interval: undefined | NodeJS.Timeout

/* 获取information内容 */
function getPageInformation() {
  getProcData().then(({ data }) => {
    runSpeed.value = data.rev1 ?? 0
    const keys = Object.keys(data) as any[]
    keys.forEach(key => {
      const index = informationList.value.findIndex(item => item.id === key)
      if (index !== -1) {
        informationList.value[index].value = data[key] ?? 0
      }
    })
  })
  getVibData().then(({ data }) => {
    const keys = Object.keys(data) as any[]
    keys.forEach(key => {
      const index = informationList.value.findIndex(item => item.id === key)
      if (index !== -1) {
        informationList.value[index].value = data[key] ?? 0
      }
    })
  })
}

onMounted(() => {
  getPageInformation()
  interval = setInterval(() => {
    getPageInformation()
  }, 10000)
})

onUnmounted(() => {
  EventBus.off('manyBtnClick')
  if (interval) {
    clearInterval(interval)
  }
})
</script>

<template>
  <comp-wrapper :run-speed="runSpeed">
    <image-cover
      src="/images/6号汽轮.png"
      :information="informationList"
    ></image-cover>
    <template #echarts>
      <charts />
    </template>
  </comp-wrapper>
</template>

<style scoped lang="scss"></style>
